{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "6d755081-7f9f-4c6a-93e5-a28c8627a0ec",
   "metadata": {},
   "source": [
    "Button\n",
    "======="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "be69e205-0c56-44b7-926b-5482d5300a38",
   "metadata": {},
   "outputs": [],
   "source": [
    "button = ilua.widgets.button({description=\"hello\"})\n",
    "output = ilua.widgets.output()\n",
    "ilua.display.display(button,output)\n",
    "button:on_click(function()\n",
    "    output:captured(function()\n",
    "        print(\"clicked\")\n",
    "    end)\n",
    "end)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d11b0def-5115-4369-9972-4766802c846f",
   "metadata": {
    "tags": []
   },
   "source": [
    "Box Layout\n",
    "=========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5d044224-ac2e-4722-b3fb-6d75b13ec366",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "slider_a = ilua.widgets.slider({min=1, max=2, step=0.1})\n",
    "slider_b = ilua.widgets.slider({min=10, max=20, step=1})\n",
    "hbox = ilua.widgets.hbox()\n",
    "output = ilua.widgets.output()\n",
    "hbox:add(slider_a, slider_b)\n",
    "ilua.display.display(hbox,output)\n",
    "\n",
    "slider_a:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       io.write(\"f(x) = x**2; f(\", value ,\")=\", value*value,\"\\n\")\n",
    "    end)\n",
    "end)\n",
    "slider_b:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       io.write(\"f(x) = x**3; f(\", value ,\")=\", value*value*value,\"\\n\")\n",
    "    end)\n",
    "end)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "98e79948-9aeb-4c31-a7b9-3c6bce6c026f",
   "metadata": {},
   "source": [
    "Accordion\n",
    "================"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b755c37d-602a-4b46-97ee-8e044f2f2314",
   "metadata": {},
   "outputs": [],
   "source": [
    "output = ilua.widgets.output()\n",
    "button = ilua.widgets.button({description=\"a button\"})\n",
    "button:on_click(function()  \n",
    "    output:captured(function()\n",
    "       print(\"clicked button\")\n",
    "    end)\n",
    "end)\n",
    "slider = ilua.widgets.slider()\n",
    "color_picker = ilua.widgets.color_picker()\n",
    "audio = ilua.widgets.audio()\n",
    "accordion = ilua.widgets.accordion()\n",
    "accordion:add(slider,button,color_picker,audio)\n",
    "accordion:set_title(1,\"the slider\")\n",
    "accordion:set_title(2,\"the button\")\n",
    "accordion:set_title(3,\"the color_picker\")\n",
    "accordion:set_title(4,\"the audio\")\n",
    "ilua.display.display(accordion, output)\n",
    "\n",
    "slider:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"slider value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "color_picker:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"color_picker value\", value)\n",
    "    end)\n",
    "end)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "097d19f7-a0c9-48a9-8eff-6e3e06780c88",
   "metadata": {
    "tags": []
   },
   "source": [
    "Dropdown\n",
    "========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "95e12c50-4e77-457c-b2c2-6d20421a3bea",
   "metadata": {},
   "outputs": [],
   "source": [
    "labels = {\"aaa\", \"bb\",\"cc\"}\n",
    "dropdown = ilua.widgets.dropdown({_options_labels= labels})\n",
    "output = ilua.widgets.output()\n",
    "dropdown:register_observer(function(index)\n",
    "    output:captured(function()\n",
    "       print(labels[index])\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(dropdown, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ca362331-bd0c-4203-9a6f-dc937d309297",
   "metadata": {},
   "source": [
    "Html\n",
    "======="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "abc66753-53ba-4361-96a6-48cd9460c8e3",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "src = [[\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "    <head>\n",
    "    </head>\n",
    "    <body>\n",
    "        <h1>My First Page</h1>\n",
    "        <p>This is my first page.</p>\n",
    "        <h2>A secondary header.</h2>\n",
    "        <p>Some more text.</p>\n",
    "    </body>\n",
    "</html>\n",
    "]]\n",
    "html = ilua.widgets.html({value=src})\n",
    "ilua.display.display(html)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e8eeacfe-350a-4ecb-81a9-c8091af3c22e",
   "metadata": {
    "tags": []
   },
   "source": [
    "numeral\n",
    "========"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c177cfe-2613-43a3-a217-d93bc257420e",
   "metadata": {},
   "outputs": [],
   "source": [
    "numeral = ilua.widgets.numeral()\n",
    "output = ilua.widgets.output()\n",
    "numeral:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "ilua.display.display(numeral, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9fede355-2e4f-48c9-b39b-1886e060ce8b",
   "metadata": {},
   "source": [
    "password\n",
    "========"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "455996cf-9b63-4d50-869a-0f479ab3daf4",
   "metadata": {},
   "outputs": [],
   "source": [
    "password = ilua.widgets.password()\n",
    "output = ilua.widgets.output()\n",
    "password:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(password, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6306ce8e-37d3-4dbc-a8cf-955b2dfe684c",
   "metadata": {},
   "source": [
    "play\n",
    "====="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "986147ab-c9de-4ad9-b8be-f65260dd815d",
   "metadata": {},
   "outputs": [],
   "source": [
    "play = ilua.widgets.play({interval=1000})\n",
    "output = ilua.widgets.output()\n",
    "play:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(play, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4e03ccf2-3a10-40d6-8273-168a91f3d9a7",
   "metadata": {},
   "source": [
    "progress\n",
    "========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a4f194ee-0995-44f3-8636-b629bd5b65ba",
   "metadata": {},
   "outputs": [],
   "source": [
    "progress = ilua.widgets.progress({min=10, max=20})\n",
    "play = ilua.widgets.play({min=10, max=20, interval=100})\n",
    "play:register_observer(function(value)\n",
    "    progress.value = value\n",
    "end)\n",
    "ilua.display.display(play, progress)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "39714034-99f4-4f36-b50f-33aa3f71d2a6",
   "metadata": {},
   "source": [
    "Selection Slider\n",
    "================="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f6aab9e-b3ce-4df9-83a6-94eb725aceb0",
   "metadata": {},
   "outputs": [],
   "source": [
    "labels = {\"aaa\", \"bb\",\"cc\"}\n",
    "selectionslider = ilua.widgets.selectionslider({_options_labels = labels})\n",
    "output = ilua.widgets.output()\n",
    "selectionslider:register_observer(function(index)\n",
    "    output:captured(function()\n",
    "       print(labels[index])\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(selectionslider, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45d72396-3fcc-421e-865e-487d93b333b8",
   "metadata": {},
   "source": [
    "Tab\n",
    "======"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6d0684e8-62a2-4483-995a-70d7cc2783ac",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n",
    "slider_a = ilua.widgets.slider()\n",
    "slider_b = ilua.widgets.slider()\n",
    "\n",
    "titles =  {\"aaa\", \"bb\",\"cc\"}\n",
    "tab = ilua.widgets.tab({_titles = titles})\n",
    "tab:add(slider_a,slider_b)\n",
    "output = ilua.widgets.output()\n",
    "\n",
    "tab:register_observer(function(index)\n",
    "    --  use output widget to caputre prints   \n",
    "    output:captured(function()\n",
    "       print(titles[index])\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(tab,output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7f9f85de-a5b8-4e60-9eff-33b25d819ec9",
   "metadata": {},
   "source": [
    "Text\n",
    "====="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "893e92ad-eff2-4adb-ba82-71a9ed2cfe9e",
   "metadata": {},
   "outputs": [],
   "source": [
    "text = ilua.widgets.text()\n",
    "output = ilua.widgets.output()\n",
    "text:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "text:on_submit(function()\n",
    "    output:captured(function()\n",
    "       print(\"on_submit\")\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(text, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "94572d62-12ea-4026-a531-d0e7bc5b20b9",
   "metadata": {},
   "source": [
    "TextArea\n",
    "========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e76b56f-f087-49f8-a50e-eb794060c63c",
   "metadata": {},
   "outputs": [],
   "source": [
    "textarea = ilua.widgets.textarea({continuous_update=false})\n",
    "output = ilua.widgets.output()\n",
    "textarea:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "ilua.display.display(textarea, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "68011d67-ac8c-43ff-bae9-4caf95273f98",
   "metadata": {},
   "source": [
    "Toggle Button\n",
    "========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cf780275-b2de-48d4-bb2e-3f38e8c45bcd",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "togglebutton = ilua.widgets.togglebutton({\n",
    "    icon=\"plus\",\n",
    "    button_style=\"\"\n",
    "})\n",
    "output = ilua.widgets.output()\n",
    "togglebutton:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(togglebutton, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1bc5c504-cf9c-432f-a91c-2497910d787b",
   "metadata": {},
   "source": [
    "ToggleButtons\n",
    "========="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f764f285-d71f-4c93-92b4-923484846b0c",
   "metadata": {},
   "outputs": [],
   "source": [
    "togglebuttons = ilua.widgets.togglebuttons()\n",
    "togglebuttons._options_labels = {\"1\", \"2\",\"3\"}\n",
    "output = ilua.widgets.output()\n",
    "togglebuttons:register_observer(function(value)\n",
    "    output:captured(function()\n",
    "       print(\"value\", value)\n",
    "    end)\n",
    "end)\n",
    "\n",
    "ilua.display.display(togglebuttons, output)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "55447db2-bab0-4282-9a89-f6b9f8fd9e30",
   "metadata": {},
   "source": [
    "Image\n",
    "========"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d21c5e4b-1d27-44e9-9966-0da4ef55f651",
   "metadata": {},
   "outputs": [],
   "source": [
    "io = require(\"io\")\n",
    "file = io.open(\"marie.png\", \"r\")\n",
    "content = file:read(\"*all\")\n",
    "io.close(file)\n",
    "\n",
    "image = ilua.widgets.image()\n",
    "image.value = content\n",
    "ilua.display.display(image)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee4e079c-0101-49a9-94f6-2d7e73ad3f59",
   "metadata": {
    "tags": []
   },
   "source": [
    "Video\n",
    "========"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "654c050a-3cff-48d2-b7a1-d8f6acfe042a",
   "metadata": {},
   "outputs": [],
   "source": [
    "io = require(\"io\")\n",
    "file = io.open(\"Big.Buck.Bunny.mp4\", \"r\")\n",
    "content = file:read(\"*all\")\n",
    "io.close(file)\n",
    "\n",
    "video = ilua.widgets.video({loop=false})\n",
    "video.value = content\n",
    "ilua.display.display(video)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "829cf76c-238d-456f-a5b9-51f3a526f45c",
   "metadata": {},
   "source": [
    "Audio\n",
    "======"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "43922e68-ee53-40bd-bf2c-8dcc810bdb6a",
   "metadata": {},
   "outputs": [],
   "source": [
    "io = require(\"io\")\n",
    "file = io.open(\"hehe.flac\", \"r\")\n",
    "content = file:read(\"*all\")\n",
    "io.close(file)\n",
    "\n",
    "audio = ilua.widgets.audio({loop=false})\n",
    "audio.value = content\n",
    "ilua.display.display(audio)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2aee848b-a3e6-4ce3-9d2d-8650871bb225",
   "metadata": {},
   "source": [
    "Valid\n",
    "======"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ef2ae714-2077-4767-9c24-af821fbc2c9d",
   "metadata": {},
   "outputs": [],
   "source": [
    "valid = ilua.widgets.valid()\n",
    "valid.value = false\n",
    "ilua.display.display(valid)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "96b64ffe-ac69-4b0e-9299-0a54842a77c1",
   "metadata": {},
   "source": [
    "Link Widgets\n",
    "============"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "191675ca-c53e-4c83-a0cf-8dcd78b02fae",
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = ilua.widgets.slider()\n",
    "numeral = ilua.widgets.numeral()\n",
    "\n",
    "link = ilua.widgets.link(slider, \"value\", numeral, \"value\")\n",
    "ilua.display.display(link, slider, numeral)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3d54b0cc-7f2f-4ad7-92a8-9f61abe989f9",
   "metadata": {},
   "source": [
    "Directional Link\n",
    "==================="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "21499154-6da9-4a4a-a6ce-7637916d26c6",
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = ilua.widgets.slider()\n",
    "numeral = ilua.widgets.numeral()\n",
    "\n",
    "link = ilua.widgets.directional_link(slider, \"value\", numeral, \"value\")\n",
    "ilua.display.display(link, slider, numeral)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Lua 0.2 (XLua)",
   "language": "lua",
   "name": "xlua"
  },
  "language_info": {
   "file_extension": ".lua",
   "mimetype": "text/x-luasrc",
   "name": "lua",
   "version": "14.0.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
